<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="menu.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
	$(function() {

		var height = $(window).height();
		var width = $(window).width();

		$("#designers").css("width", (width / 2));
		$("#fieldEnviadas").css("height", (height / 2)-60);
		$("#fieldRetornadas").css("height", (height / 2)-60);
		$("#divScrollRetornadas").css("height", (height / 2)-125);
		$("#divScrollDesigner").css("height", (height / 2)-125);

		$("#fieldDescricao").css("height", height - 68);
		$("#fieldDescricao").css("width", (width / 2) - 20);
		$("#descricao").css("min-height", height - 245);
		$("#descricao").css("min-width", (width / 2) - 25);
		$("#descricao").css("max-height", height - 245);
		$("#descricao").css("max-width", (width / 2) - 25);

		$("#divScrollDesigner").load("ajax/atualizaTabelaDesigner.jsp");
		<%if(sessaoIdFuncao == 2){%>
		$("#divScrollRetornadas").load("ajax/atualizaTabelaDesignerRetornada.jsp");
		<%}%>
		//atu();

		function atu() {
			setTimeout(function() {
				$("#divScrollDesigner").load("ajax/atualizaTabelaDesigner.jsp");
				<%if(sessaoIdFuncao == 2){%>
				$("#divScrollRetornadas").load("ajax/atualizaTabelaDesignerRetornada.jsp");
				<%}%>
				atu();
			}, 10000);
		};

		function fechar() {
			$("#btnAtivarEdicao").button({disabled : true});
			$("#descricao").val("");
			$("#descricao").attr("disabled", "disabled");
			$("#idOs").val("");
			$("#fontMsn").html("");
			$("#nomeCliente").html("Nenhuma descrição selecionada");

		};

		$("#btnComentar").button().click(function(){
			var comentario = $("#comentario").val();
			var id = $("#idOs").val();
			if(comentario == "" || id == ""){
				return false;
			}
			$.ajax({
				url:"comentarServlet",
				data: {comentario: comentario, id: id},
				beforeSend:function(){
					$("#loadComentarioOS").show();
				},
				success:function(html){
					$("#comentario").val("");
					$("#comentario").focus();
					$("#comentario"+id).html(html);
					$("#descricao").val($("#descricao"+id).html() + "\n\n" + html);
					$("#descricao").scrollTop(999999);
					$("#comentario").css('height', '48px');
					$("#loadComentarioOS").hide();
				}
			});
			return false;
		});
		
		<%if(sessaoIdFuncao == 5){%>
		
/*-----------DialogConfirm do Entregador------------------------*/		
				
				$("#dialogConfirm").dialog({
					autoOpen : false,
					height : 166,
					width : 280,
					modal : true,
					resizable : false,
					buttons:{
						"Finalizar":function(){
							var idOS = $("#dialogConfirmaId").val();
							$.ajax({
								url:"proximaSituacaoServlet",
								data: {id : idOS, entregue : $("#entregue").val()},
								success:function(html){
									if(html == ""){
										$("#" + idOS).remove();
										$("#dialogConfirm").dialog("close");
										if($("#idOs").val() == idOS){
											fechar();
										}
									}else{
										$("#msnDialogConfirm").html(html);
										$("#entregue").focus();
									}
								},
								error:function(){
									$("#msnDialogConfirm").html("Erro de conexão!");
								}
							});
						},
						Cancelar:function(){
							$(this).dialog("close");
						}
					},
					close : function() {
						$("#msnDialogConfirm").html("Informe pra quem foi entregue.");
						$("#entregue").val("");
						$("#idOsDialogConfirm").val("");
					}
				});
				<%}else{%>
		
		/*dialog*/
		
		$("#dialogConfirm").dialog({
			autoOpen : false,
			height : 'auto',
			width : 300,
			modal : true,
			resizable : false,
			buttons:{
				"Sim":function(){
					var idOS = $("#dialogConfirmaId").val();
					$.ajax({
						url : "proximaSituacaoServlet",
						data : {id : idOS},
						success : function() {
							$("#" + idOS).remove();
							$("#descricao").html("");
							$("#dialogConfirm").dialog("close");
							if($("#idOs").val() == idOS){
								fechar();
							}
						}
					});
				},
				Não:function(){
					$(this).dialog("close");
				}
			},
			close : function() {
				$("#dialogConfirmaId").val("");
			}
		});
		<%}%>

/*-----------tamanho automatico no textarea------------------------*/	
		$.fn.autosize = function() {
			$(this).each(function(){
				$(this).css({'overflow' : 'hidden'});
				$('body').prepend('<div id="jQuery-autosize-' + $(this).attr('id') + '"></div>');
				$('#jQuery-autosize-' + $(this).attr('id')).css({
					'display'      : 'none',
					'word-wrap'    : 'break-word',
					'font-family'  : $(this).css('font-family'),
					'padding'      : $(this).css('padding'),
					'font-size'    : $(this).css('font-size'),
					'font-padding' : $(this).css('font-padding'),
					'font-weight'  : $(this).css('font-weight'),
					'line-height'  : $(this).css('line-height'),
					'min-height'   : $(this).height(),
					'width'        : $(this).width() - 5
				});
				autosize($(this));
				$(this).bind('keyup keypress change', function() {
					autosize($(this));
				});
			});
		};
			 
		function autosize(e) {
			div_id = '#jQuery-autosize-' + e.attr('id');
			val = e.val().replace(/\n/g, '<br />');
			$(div_id).empty();
			$(div_id).append(val + '<br /><br />');
			if($(div_id).height() > 40){
				e.css('height', $(div_id).height());
				$(div_id).css('width', e.width() - 5);
			}
		}
		
		$("#comentario").autosize();
	});

</script>
</head>
<body>
	<table border="0" cellpadding="0" cellspacing="0"
		style="margin-bottom: -10px;">
		<tr>
			<td id="designers" style="vertical-align: top">

				<fieldset class="ui-corner-all" id="fieldEnviadas"
					style="background: threedlightshadow; margin-top: 10px; padding-bottom: 10px;">
					<legend class="ui-corner-all" style="margin-left: 10px;">OSs
						Enviadas</legend>
					<br />
					<table class="tablesorter">
						<thead>
							<tr>
								<th width="25">Cód.</th>
								<th>Cliente</th>
								<th align="center" width="83">Entrada</th>
								<th align="center" width="55">Ações</th>
								<th width="6"></th>
							</tr>
						</thead>
					</table>
					<div id="divScrollDesigner" class="divScroll"></div>
				</fieldset> <br />
				<%if(sessaoIdFuncao == 2){%>
				<fieldset class="ui-corner-all" id="fieldRetornadas"
					style="background: threedlightshadow; margin-top: 10px; padding-bottom: 10px; margin-bottom: -10px;">
					<legend class="ui-corner-all" style="margin-left: 10px;">OSs
						Retornadas</legend>
					<br />
					<table class="tablesorter">
						<thead>
							<tr>
								<th width="25">Cód.</th>
								<th>Cliente</th>
								<th align="center" width="83">Entrada</th>
								<th align="center" width="55">Ações</th>
								<th width="6"></th>
							</tr>
						</thead>
					</table>
					<div id="divScrollRetornadas" class="divScroll"></div>
				</fieldset>
				<%}%>
			</td>
			<td style="vertical-align: top;">
				<fieldset id="fieldDescricao" class="ui-corner-all"
					style="background: threedlightshadow; margin: 10px 0px -10px -3px;">
					<legend class="ui-corner-all" style="margin-left: 10px;">Descrição e Comentário</legend>
					<div style="margin-left: 150px;">
						<font id="nomeCliente" style="color: #333;">Nenhuma
							descrição selecionada</font>
					</div>
					<font id="fontMsn" style="margin-left: 15px; color: #333;"></font>
					<p />
					<div style="border: 1px solid #CCCCCC; margin: 15px 0 5px; padding: 0 0 0 5px;
						background-color: #FFFFFF;">
						<textarea id="descricao" disabled="disabled" class="descricao"
							style="margin: 0px; background-color: #ffffff;
							padding: 0;	width: 500px; overflow-y: auto; resize:none;"></textarea>
					</div>
					<div align="center">
						<div style="border: 1px solid #CCCCCC; margin: 15px 0 5px; padding: 5px 0 5px 5px;
							background-color: #FFFFFF; overflow-y: auto; max-height: 48px; width: 95%;" > 
							<textarea id="comentario" class="comentario" 
								placeholder="Escrever um comentario..."
								style="margin: 0px; width: 100%;
								border: none; padding: 0; height: 48px;
								resize:none;"></textarea>	
						</div>
						<div style="width: 96%;" align="right">
							<img id="loadComentarioOS" src="imagens/load.gif" style="margin: 5px 5px -10px 0; display: none;">
							<button id="btnComentar" style="float: right;">Comentar</button>
						</div>
					</div>
					<input type="hidden" id="idOs" value="">
				</fieldset>
			</td>
		</tr>
	</table>
	
<!-- Dialogs -->

<%if(sessaoIdFuncao == 5){%>
<div id="dialogConfirm" title="Confirmar Entrega">
	<p id="msnDialogConfirm">Informe o nome de quem recebeu.</p>
	<input type="text" size="47" id="entregue" name="entregue" style="padding: 4px; font-size: 12px;" class="ui-widget-content ui-corner-all">
	<input type="hidden" id="dialogConfirmaId" value="">
	</div>
<%}else{%>
<div id="dialogConfirm" title="Confirmar Finalizar OS">
	<br/>
	<p/><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Realmente deseja finalizar?
	<input type="hidden" id="dialogConfirmaId" value="">
</div>
<%}%>
</body>
</html>